<template>
  <view class="card-list">
    <view class="list-item" v-for="item in cardList" :key="item.id">
      <view class="bg-img">
        <image :src="item.bankUrl" class="bg" />
      </view>
      <view class="item-content">
        <div class="top">
          <image :src="item.bankLogoUrl" class="icon" />
          <view class="top-text">{{ item.bankDeposit }}</view>
        </div>
        <view class="middle">
          <view>{{ $t("bank.chuXuK") }}</view>
          <view class="middle-button" @click="deleteBankCard(item.id)">{{ $t("bank.jieBang") }}</view>
        </view>
        <view class="bottom">
          <text>****</text>
          <text>****</text>
          <text>****</text>
          {{ item.bankNumber }}
        </view>
      </view>
    </view>

    <view class="add-button" @click="toAddCard">
      <view> <u-icon name="plus" size="18"></u-icon></view>
      <view class="text">{{ $t("bank.tianJiaYhK") }}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      pageNum: 1,
      pageSize: 100,
      cardList: [],
    };
  },
  onLoad(options) {},
  onReady() {
    uni.setNavigationBarTitle({
      title: this.$t("page.yinHangKlB"),
    });
  },
  onShow() {
    this.getUserCardList();
  },
  methods: {
    async getUserCardList() {
      const res = await this.$api.userCardList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      });
      if (res.code === 0) {
        this.cardList = res.data.list;
      }
    },
    async deleteBankCard(id) {
      const res = await this.$api.delUserCard({ id: id });
      if (res.code === 0) {
        this.getUserCardList();
      }
    },
    toAddCard() {
      uni.navigateTo({ url: "/pages/add_card/add_card" });
    },
  },
};
</script>
<style lang="scss">
page {
  background-color: #f6f6f6 !important;
}
</style>
<style lang="scss" scoped>
/deep/ .u-steps {
  height: 300px;
  background-color: #fff;
  .u-text {
    flex: 0;
  }
}
.card-list {
  margin: 0 auto 0;
  overflow: hidden;
  width: calc(100% - 40px);
  padding-bottom: 30px;
  .list-item {
    width: 100%;
    height: 115px;
    overflow: hidden;
    position: relative;
    margin-top: 15px;
    .bg-img {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 0;
      width: 100%;
      height: 115px;
      .bg {
        width: 100%;
        height: 115px;
      }
    }
    .item-content {
      width: 100%;
      height: 115px;
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
      .top {
        padding-left: 30px;
        height: 40px;
        display: flex;
        align-items: center;
        margin-top: 10px;
        .icon {
          width: 20px;
          height: 20px;
        }
        .top-text {
          color: #fff;
          padding-left: 10px;
        }
      }
      .middle {
        color: #efefef;
        font-size: 14px;
        padding: 0 30px 0 60px;
        height: 24px;
        line-height: 24px;
        display: flex;
        justify-content: space-between;
        .middle-button {
          background: rgba(255, 255, 255, 0.39);
          border-radius: 17px;
          padding: 0 20px;
        }
      }
      .bottom {
        color: #ffff;
        font-size: 16px;
        padding-left: 60px;
        height: 30px;
        line-height: 30px;
        overflow: hidden;
        text {
          margin-right: 20px;
        }
      }
    }
  }
  .add-button {
    height: 75px;
    box-shadow: 0px 1px 3px rgba(189, 189, 189, 0.16);
    border-radius: 8px;
    background-color: #fff;
    margin-top: 30px;
    display: flex;
    align-items: center;
    padding: 0 30px;
    .text {
      font-size: 14px;
      padding-left: 10px;
    }
  }
}
</style>
